<template>
	<view class="container">
		<view class="changtype">
			<view class="item" @click="changindex(1)" :class="index == 1 ? 'itemselect' : ''">
				游戏
				<view class="x" v-show="index == 1"></view>
			</view>
			<view class="item" @click="changindex(2)" :class="index == 2 ? 'itemselect' : ''">
				主机
				<view class="x" v-show="index == 2"></view>
			</view>
		</view>
		<view class="warp">
			<view class="index-top u-flex u-col-center u-row-between">
				<view class="table c u-flex u-col-center u-row-between">
					<view class="i" :class="{ on: navIndex == index }" v-for="(item, index) in navList" :key="index" @click="navChange(item, index)">
						{{ item.name }}
					</view>
				</view>
				<view class="r" @click="searchShow = true">
					<uni-icons type="search" size="18" color="#999"></uni-icons>
					<text>搜索</text>
				</view>
			</view>
			<view class="index-bottom">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMore">
					<view class="item u-flex u-row-between u-col-center" v-for="(item, index) in list" :key="index" @click="$pageTo('/pages/index/goods?id=' + item.id)">
						<view class="img">
							<image :src="http + item.image" mode="aspectFill"></image>
						</view>
						<view class="con">
							<view class="title">
								{{ item.title }}
							</view>
							<view class="tips">
								<text v-for="(item2, index2) in item.label_arr" :key="index2">{{ item2 }}</text>
							</view>
							<view class="dis">
								<view class="price">{{ item.sales_price }}元</view>
								<view class="texts" v-if="item.is_receive_other == 2">不收别家</view>
							</view>
						</view>
					</view>
					<view class="nolist" v-if="nolist">
						<u-empty mode="data" iconSize="60" text="暂无商品"></u-empty>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="ites2abs" v-if="searchShow" @click="close">
			<view class="cont" @click.stop>
				<u-search shape="square" @search="handleConfirm" placeholder="搜一搜" :showAction="false" :clearabled="true" v-model="title" :animation="false"></u-search>
				<scroll-view :show-scrollbar="false" class="scroll" scroll-y="true">
					<view class="scrollflex">
						<view class="ites" :class="{ itesact: cateIndex == index }" @click.stop="cateChange(item, index)" v-for="(item, index) in cateList" :key="index">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
				<view class="btns">
					<view class="b1" @click="handleReset">重置</view>
					<view class="btn" @click="handleConfirm">确认</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" :round="10" mode="center" closeable @close="show = false">
			<view class="pop">
				<view class="title">歇业公告</view>
				<view style="overflow-y: auto; height: 300rpx" class="" v-html="ggdata.xieye_remark"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			http: this.$imgUrl,
			searchShow: false,
			navList: [],
			navIndex: 0,
			nid: '',
			cateList: [],
			cid: '',
			cateIndex: 0,
			page: 1,
			total: 0,
			list: [],
			nolist: false,
			title: '',
			show: false,
			ggdata: {},
			index: 1
		};
	},
	onLoad(o) {
		
	},
	onShow() {
		if (!uni.getStorageSync('token')) {
			this.login();
		} else {
			if (uni.getStorageSync('indexdata')) {
				this.index = uni.getStorageSync('indexdata').type_id;
				this.navIndex = uni.getStorageSync('indexdata').navIndex;
			}
			if (uni.getStorageSync('type') == 1) {
				this.searchShow = true
			}
			this.list = [];
			this.getcate();
			this.getshop();
			this.getgg();
		}
	},
	onHide() {
		uni.removeStorageSync('indexdata');
	},
	methods: {
		close(){
			this.searchShow = false
			uni.removeStorageSync('type')
		},
		changindex(type) {
			this.index = type;
			this.navIndex = 0;
			this.getshop();
			this.getcate();
			this.list = [];
		},
		getgg() {
			this.$http.post('/api/index/xieyeConfig').then((res) => {
				if (res.code == 1) {
					this.ggdata = res.data;
					if (res.data.xieye_switch == '1') {
						this.show = true;
					} else {
						this.show = false;
					}
				}
			});
		},
		getMore() {
			if (this.page < this.total) {
				this.page++;
				this.getList();
			}
		},
		getList() {
			this.$http
				.post('/api/product/list', {
					cate_id: this.cid,
					shop_id: this.nid,
					page: this.page,
					limit: 10,
					title: this.title
				})
				.then((res) => {
					if (res.code == 1) {
						this.list = [...this.list, ...res.data.list];
						this.total = res.data.total_page;
						this.nolist = this.list.length == 0;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
				.catch((err) => {
					console.log('错误信息：', err);
				});
		},
		getshop() {
			this.$http
				.post('/api/index/shop', {
					type_id: this.index
				})
				.then((res) => {
					if (res.code == 1) {
						this.navList = res.data;
						this.nid = this.navList[this.navIndex].id;
						this.getList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
				.catch((err) => {
					console.log('错误信息：', err);
				});
		},
		getcate() {
			this.$http
				.post('/api/index/cate', {
					type_id: this.index
				})
				.then((res) => {
					if (res.code == 1) {
						this.cateList = res.data;
						this.cateList.unshift({
							id: '',
							name: '全部'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
				.catch((err) => {
					console.log('错误信息：', err);
				});
		},
		cateChange(item, index) {
			if (this.cateIndex != index) {
				this.cateIndex = index;
				this.cid = item.id;
			}
		},
		navChange(item, index) {
			if (this.navIndex != index) {
				this.navIndex = index;
				this.nid = item.id;
				this.page = 1;
				this.list = [];
				this.getList();
			}
		},
		handleReset() {
			this.cateIndex = 0;
			this.cid = '';
			this.title = '';
		},
		handleConfirm() {
			this.searchShow = false;
			uni.removeStorageSync('type')
			this.page = 1;
			this.list = [];
			this.getList();
		},
		login() {
			uni.login({
				provider: 'alipay',
				success: (data) => {
					let authCode = data.authCode;
					this.$http
						.post('/api/user/getAliUserIdByCode', {
							code: authCode
						})
						.then((res2) => {
							if (res2.code == 1) {
								uni.setStorageSync('token', res2.data.userinfo.token);
								uni.setStorageSync('userId', res2.data.userinfo.user_id);
								let loginTime = new Date().getTime();
								uni.setStorageSync('loginTime', loginTime);
								uni.showToast({
									title: '登录成功',
									icon: 'none',
									duration: 1500
								});
								this.getcate();
								this.getshop();
							} else {
								uni.showToast({
									title: res2.msg,
									icon: 'none'
								});
							}
						})
						.catch((err2) => {
							console.log('表单错误信息：', err2);
						});
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.pop {
	width: 630rpx;
	height: 431rpx;
	background: #fcfdff;
	border-radius: 40rpx;
	padding: 40rpx;
	box-sizing: border-box;

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #000;
		text-align: center;
	}
}

@color: #e31d21;

.dis {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
}

.texts {
	background-color: #ebf5ff;
	padding: 10rpx 14rpx;
	color: #007add;
	font-size: 24rpx;
	margin-left: 20rpx;
}

.r-kf {
	position: fixed;
	bottom: 200rpx;
	right: 30rpx;
	height: 80rpx;
	width: 80rpx;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.class-show {
	position: fixed;
	top: 80rpx;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	.list {
		background-color: #fff;
		width: 100%;
		height: 600rpx;
		padding: 20rpx;

		overflow: hidden;
		overflow-y: auto;
		box-sizing: border-box;

		.item {
			float: left;
			width: 220rpx;
			margin-right: 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 6rpx;
			background-color: #f9f9f9;
			text-align: center;
			font-size: 24rpx;
			color: #333;
			margin-bottom: 20rpx;
			overflow: hidden;
			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.on {
			background-color: #fddba7;
			color: @color;
		}
	}
}
.ites2abs {
	position: fixed;
	top: 80rpx;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	.cont {
		height: 520rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.scroll {
		height: 280rpx;
		margin-top: 20rpx;
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}
		.scrollflex {
			display: flex;
			flex-wrap: wrap;
			.ites {
				text-align: center;
				min-width: 120rpx; /* 最小宽度 */
				max-width: 300rpx; /* 最大宽度 */
				width: auto;
				padding: 0rpx 15rpx;
				height: 60rpx;
				color: #979797;
				line-height: 60rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				background: #f5f5f5;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				overflow: hidden;
				margin-right: 15rpx;
			}
			.itesact {
				background: #ffe6e6;
				color: @color;
			}
		}
	}

	.btns {
		display: flex;
		margin: 20rpx auto;
		justify-content: space-evenly;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		.b1 {
			width: 340rpx;
			height: 80rpx;
			background: #f4f4f4;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 80rpx;
			color: #979797;
		}

		.btn {
			width: 340rpx;
			height: 80rpx;
			background: #ff8080;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 80rpx;
			color: #ffffff;
		}
	}
}
.changtype {
	background: #fff;
	height: 80rpx;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: relative;

	.item {
		width: 200rpx;
		font-size: 30rpx;
		color: #666;
		text-align: center;
	}

	.x {
		position: absolute;
		bottom: 0%;
		width: 200rpx;
		height: 6rpx;
		background: #e31d21;
		border-radius: 3rpx;
	}

	.itemselect {
		color: #e31d21;
		font-weight: bold;
		font-size: 30rpx;
	}
}

.warp {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	.index-top {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;
		border-top: 2rpx solid #eee;
		box-sizing: border-box;
		.table {
			flex: 1;
			white-space: nowrap;
			overflow-y: auto;
			.i {
				display: inline-block;
				margin-right: 15rpx;
			}
		}
		.l {
			text {
				font-size: 26rpx;
				color: #666;
				padding: 0 10rpx;
			}
		}

		.c {
			height: 80rpx;
			line-height: 80rpx;
			flex: 1;
			width: 1rpx;
			padding: 0 20rpx;

			.i {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #333;
			}

			.on {
				color: @color;
				position: relative;
				font-weight: 600;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					height: 6rpx;
					border-radius: 3rpx;
					background-color: @color;
					width: 40rpx;
					margin-left: -20rpx;
				}
			}
		}
		.r {
			height: 80rpx;
			line-height: 80rpx;
			padding: 0rpx 10rpx;
			// box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
			box-shadow: -5rpx 0 10rpx 0rpx rgba(0, 0, 0, 0.2);
			text {
				font-size: 28rpx;
				color: #666;
				padding: 0 10rpx;
			}
		}
	}

	.index-bottom {
		width: 100%;
		height: 1px;
		flex: 1;

		.scroll-Y {
			width: 100%;
			height: 100%;
			box-sizing: border-box;

			.item {
				padding: 30rpx;
				border-bottom: 2rpx solid #eee;
				background-color: #fff;

				.img {
					width: 150rpx;
					height: 241rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.con {
					padding-left: 20rpx;
					flex: 1;
					width: 1rpx;
					height: 200rpx;
					.title {
						font-size: 30rpx;
						color: #333;
						height: 40rpx;
						line-height: 40rpx;
						overflow: hidden;
					}
					.tips {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						text {
							display: inline-flex;
							height: 30rpx;
							line-height: 30rpx;
							border: 2rpx solid #eee;
							border-radius: 6rpx;
							padding: 0 10rpx;
							font-size: 24rpx;
							color: #666;
							margin: 10rpx 10rpx 0 0;
						}
					}

					.price {
						height: 40rpx;
						line-height: 40rpx;
						font-size: 32rpx;
						color: @color;
						font-weight: 600;
					}
				}
			}
		}
	}
}
</style>
